<template>
<div class="Collapse">
    <div class="tool-bar">
        <var-button type="primary" @click="active =1">模块1</var-button>
        <var-button type="info" @click="active =2">模块2</var-button>
    </div>

    <var-collapse v-show="active == 1" v-model="value">
        <var-collapse-item title="模块1-标题" name="1">内容</var-collapse-item>
        <var-collapse-item title="模块1-标题" name="2">内容</var-collapse-item>
    </var-collapse>

    <var-collapse v-show="active == 2" v-model="value2">
        <var-collapse-item title="模块2-标题" name="1">内容</var-collapse-item>
        <var-collapse-item title="模块2-标题" name="2">内容</var-collapse-item>
    </var-collapse>
</div>
</template>

<script>
export default {
    name: 'Collapse',
    components: {},
    data() {
        return {
            active: 1,
            value: ['1','2'],
            value2: ['1','2'],
        }
    },
};
</script>

<style lang="scss" scoped>
.Collapse {}
</style>
